import { FC ,useState} from 'react'
import './App.css'
const App: FC = () => {
  // 列表页
  const [questonList,setList] = useState([
    {id: 1, title: '问卷1',isPublished: true},
    {id: 2, title: '问题2',isPublished: true},
    {id: 3, title: '问题3',isPublished: false},
    {id: 4, title: '问题4',isPublished: false},
    {id: 5, title: '问题5',isPublished: false},
  ])
  function edit(id:number){
    const index = questonList.findIndex(item=>item.id === id)
    const newList = [...questonList]
    newList[index].isPublished = !newList[index].isPublished
    setList(newList)
  }
  return <div>
    <h1>问卷列表</h1>
    {questonList.map(item=>{
      return <div key={item.id} className='list-item'>
        <strong>{item.title}</strong>
        &nbsp;
        {item.isPublished ? <span style={{color:'green'}}>已发布</span> : <span style={{color:'red'}}>未发布</span>}
        <button onClick={()=>edit(item.id)}>{item.isPublished?'下架':'发布'}</button>
      </div>
    })}
  </div>
}

export default App
